<template>
  <div>
    <div>
      count：{{ count }}
      <button @click="changeCount()">修改count</button>
    </div>
    <hr />
    <div>
      obj：{{ obj }}
      <button @click="changeObj()">修改obj</button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
let count = ref(0);
let obj = reactive({
  name: "张三",
  age: 18,
});

function changeCount() {
  count.value++;
}

function changeObj() {
  obj.age++;
}

//监听count 变化
watch(count, (newValue, oldValue) => {
  console.log("newValue", newValue);
  console.log("oldValue", oldValue);
});

//监听整个obj变化
watch(obj, (newValue, oldValue) => {
  console.log("newValue", newValue);
  console.log("oldValue", oldValue);
});

//监听对象的单个属性变化
watch(
  () => obj.age,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  }
);

//立即监听
watch(
  () => obj.age,
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  },
  {
    immediate: true,
  }
);

//监听多个值
watch(
  [count, obj],
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  },
  {
    immediate: true,
  }
);

watch(
  [count, () => obj.age],
  (newValue, oldValue) => {
    console.log("newValue=", newValue);
    console.log("oldValue=", oldValue);
  },
  {
    immediate: true,
  }
);
</script>
<style scoped></style>
